<template>
	<view class="header">
		<view class="shop-info uni-flex uni-row">
			<view class="shop-info_img">
				<image class="shop-info_img_img"
					:src="userInfo.avatar ?userInfo.avatar  : '../../static/images/avatar.png'">
				</image>
				<block>
					<button class="refresh-btn" withCredentials="true" lang="zh_CN" @tap="refreshWechatUser">
						<uni-icons type="reload" color="#fff" size="20"></uni-icons>
					</button>
				</block>
			</view>
			<view class="shop-info_txt">
				<view class="shop-info_name"><text v-if="userInfo.is_agent == '1'">代理商</text>{{userInfo.nickname}}
				</view>
				<view class="shop-info_come">{{userInfo.mobile ? userInfo.mobile : ''}}</view>
				<!-- <view v-if="userInfo.is_agent == '1'" class="shop-info_come">身份：代理员</view> -->
			</view>
			<!-- <view class="shop-info_txt" style="margin-left: 200rpx;"  @tap="xiaoxi()">
				<view class="shop-info_name">开启订单通知</view>
				<switch :checked="checked" :disabled="disabled" style="transform:scale(0.7)" @change="switchs()"/>
			</view> -->
		</view>
		<view class="wallet">
			<view class="wallet-item">
				<text class="wallet-item-tip">今日双平台订单数</text>
				<text class="wallet-item-num">{{userInfo.today_order_num}}</text>
			</view>
			<view class="wallet-item">
				<text class="wallet-item-tip">今日消费金额</text>
				<text class="wallet-item-num">{{userInfo.today_total_money}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		name: 't-user-card',
		data() {
			return {
				requestIng: false
			}
		},
		props: {

		},
		computed: {
			...mapGetters(['userInfo']),
		},
		beforeCreate() {},
		methods: {
			refreshWechatUser() {
				let that = this;
				if (uni.getUserProfile) {
					return new Promise((resolve, reject) => {
						uni.getUserProfile({ // 必须手动确认触发
							desc: "更新会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
							success: res => {
								uni.hideLoading();
								console.log('更新会员资料返回值', res)
								if (res.errMsg === "getUserProfile:ok") {
									!that.requestIng && ((that.$util.loading('更新中'), that.requestIng =
											true),
										that.$http('user.updateUserInfo', {
											encryptedData: res.encryptedData,
											iv: res.iv,
											signature: res.signature,
											rawData: res?.rawData,
											nickName: res?.userInfo?.nickName,
											avatarUrl: res?.userInfo?.avatarUrl,
										}).then(res => {
											console.log('更新返回值', res)
											that.requestIng = false
											uni.hideLoading()
											let data = res.data
											if (res.code == 1) {
												that.$util.msg('更新成功');
												that.$store.dispatch('getUserInfo');
												resolve(true);
											} else {
												that.$util.msg(res.msg || '更新失败');
												resolve(false);
											}
										})
										.catch(err => {
											that.requestIng = false
											uni.hideLoading()
											that.$util.msg('网络异常');
											resolve(false);
										}))
								}
							},
							fail: err => {
								uni.hideLoading();
							}
						});
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		// background: linear-gradient(to bottom, rgb(255, 129, 107), rgb(255, 99, 72));
		// background: #007AFF;
		// height: 260rpx;
		background: #ff9000;
		color: #fff;
		display: flex;
		flex-direction: column;
		height: 200rpx;

		.shop-info {
			// position: absolute;
			// height: 80rpx;
			// margin-top: 60rpx;
			// z-index: 100;
			display: flex;
			align-items: center;

			.shop-info_img {
				margin-left: 50rpx;
				width: 100rpx;

				height: 100rpx;
				border-radius: 50%;
				position: relative;

				.shop-info_img_img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 2px solid #fff;
					box-sizing: border-box;
				}

				.refresh-btn {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					position: absolute;
					padding: 0;
					// width: 40rpx;
					// height: 40rpx;
					border-radius: 50%;
					background: #9c723b;
					top: -14rpx;
					right: -14rpx;
				}
			}

			.shop-info_txt {
				margin-left: 20rpx;

				.shop-info_name {
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 10rpx;

					text {
						margin-right: 20rpx;
						border: 1px solid #fff;
						padding: 0 10rpx;
						border-radius: 10px;
						background: #fff;
						color: #ff9000;
					}
				}

				.shop-info_come {
					font-size: 25rpx;
					color: #FFFFFF;
				}
			}
		}

		.wallet {
			display: flex;
			justify-content: space-between;
			margin-left: 170rpx;
			margin-top: 10rpx;
			margin-right: 130rpx;

			&-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				flex: 1;

				text {}

				&-tip {
					font-size: 22rpx;
				}

				&-num {
					font-size: 38rpx;
				}
			}
		}
	}
</style>
